<template>
  <el-card shadow="hover" style="border-radius: 10px" class="platform-card">
    <div v-if="item" class="content">
      <div class="platform-main text-center">
        <el-avatar :size="60" :src="item.logo" style="background: #fff">
          <img src="@/assets/default/default.png" alt="" />
        </el-avatar>
        <p class="p5px truncate text-ellipsis overflow-hidden">{{ item.name }}</p>
      </div>
      <div class="platform-footer text-center mt10px">
        <el-button round @click="handlePlatformManage">
          <div style="display: flex; align-items: center">
            <svg class="icon w-16px h-16px mr-4px" aria-hidden="true">
              <use :xlink:href="getIconByType(item.type)"></use>
            </svg>
            <span>进入后台管理</span>
          </div>
        </el-button>
      </div>
      <div v-if="!loading" class="mt10px cl">
        <ul v-if="addons.length > 0">
          <li v-for="(val, key) in addons" :key="key" @click="openAddon(val)">
            <div v-if="val.addon" style="position: relative" class="icon-image">
              <div class="addon-icon">
                <el-image :src="val.addon.icon" alt="" style="width: 50px; height: 50px; border-radius: 5px">
                  <template #error>
                    <div class="image-slot">
                      <img src="@/assets/default/default.png" alt="" width="100%" />
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
            <p v-if="val.addon" class="truncate text-ellipsis overflow-hidden">{{ val.addon.title }}</p>
          </li>
        </ul>
        <el-empty v-else />
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

const router = useRouter()

const state = reactive({
  loading: false
})

const addons = computed(() => props.item.addons ?? [])

const getIconByType = (type) => {
  const iconMap = {
    1: '#icon-weixin2',
    2: '#icon-xiaochengxu',
    3: '#icon-qiyeweixin1',
    4: '#icon-douyin1',
    5: '#icon-yingyong4'
  }
  return iconMap[type] || '#icon-yingyong4'
}

const openAddon = (item) => {
  const url = item.addon.default_url.replace('plaid=0', 'plaid=' + item.plaid)
  window.open(url)
}

const handlePlatformManage = () => {
  router.push({ path: props.item.platform_url, query: { p: props.item.plaid } })
}

// 导出响应式数据和方法
const { loading } = state
</script>

<style scoped lang="scss">
.platform-card {
  .content {
    height: 360px;
    overflow: hidden;
    .iconfont {
      font-size: 14px;
    }
    ul {
      li {
        cursor: pointer;
        text-align: center;
        width: 33%;
        padding: 10px 0;
        font-size: 12px;
        line-height: 24px;
        float: left;
        overflow: visible;
        img {
          border-radius: 10px;
        }
        &:hover {
          img {
            box-shadow: 0 2px 10px #00000030;
          }
        }
      }
    }

    .dk-empty {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
    }
  }
}
</style>
